import React from 'react'
import { connect } from 'react-redux'
import thirdConsumptionService from 'containers/third-consumption/third-consumption.service'
import 'styles/third-consumption/third-consumption.scss'

class OrderConsumption extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }

  componentWillMount(){
    const { user, company } = this.props;
    thirdConsumptionService.getThirdConsumptionListOrder(user.employeeID, company.companyOID).then(res => {
      this.setState({ list: res.data })
    })
  }

  handleClickVenItem = (loginUrl) => {
    thirdConsumptionService.thirdConsumptionLogin(loginUrl).then(res => {
      window.open(res.data.url, '_blank')
    })
  };

  render(){
    const { list } = this.state;
    return (
      <div className="third-consumption">
        {list.map((ven, index) => (
          <div key={`ven${index}`} className="ven">
            <div className="ven-title">
              <img src={ven.venIco} className="ven-icon"/>
              {ven.venName}
            </div>
            <div className="ven-item-list">
              {ven && ven.venItems && ven.venItems.map((item, itemIndex) => (
                <div onClick={() => this.handleClickVenItem(item.loginUrl)} key={`venItem${itemIndex}`} className="ven-item">
                  <div className="ven-item-icon-box">
                    <img src={item.vendorIco} className="ven-item-icon"/>
                  </div>
                  <div className="ven-item-name">{item.vendorName}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    user: state.login.user,
    company: state.login.company
  }
}

export default connect(mapStateToProps)(OrderConsumption);
